<template>
  <div class="home">
	  <!-- 导航部分 -->
	  <div :class="['header',flag?'active':'']"></div>
	  <!-- 轮播图 -->
	  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1BAEAE">
	    <van-swipe-item v-for="item in carousels" :key="item.carouselUrl">
			<img :src="item.carouselUrl" alt="">
		</van-swipe-item>
	  </van-swipe>
	  <!-- 宫格 -->
	  <van-grid :column-num="5">
	    <van-grid-item v-for="value in 10" :key="value" icon="photo-o" text="文字" />
	  </van-grid>
	 <!-- goods组件 -->
      <!-- 新品上线  组件传参-->
	  <Goods title="新品上线" :data="newg"></Goods>
	  <!-- 热销商品 -->
	  <Goods title="热销商品" :data="hotg"></Goods>
	  <!-- 最新推荐 -->
	  <Goods title="最新推荐" :data="recommendg"></Goods>
  </div>
</template>

<script>
import Goods from '@/components/Goods.vue'

export default {
  name: 'Home',
  data(){
	return{
		flag:false,
		carousels:[],
		newg:[],//定义参数
		hotg:[],
		recommendg:[]
	}  
  },
  created(){//组件渲染前，添加事件
     window.addEventListener("scroll",this.myscroll);
	 this.getData();
  },
  methods:{
	  myscroll(){
		let html=document.documentElement||document.body;
		if(html.scrollTop>100){
			this.flag=true;
		}else{
			this.flag=false;
		}  
	  },
	  getData(){
		this.$http.getHomeInfo()
		.then(res=>{
			//console.log(res);
			if(+res.resultCode===200){
				this.carousels=res.data.carousels;
				this.newg=res.data.newGoodses;//获取数据给 data 里面的参数赋值
				this.hotg=res.data.hotGoodses;
				this.recommendg=res.data.recommendGoodses;
			}
		}).catch(err=>{
			console.log(err);
		})
	  }
  },
  destroyed(){//组件销毁的时候，移除事件
	  window.removeEventListener("scroll",this.myscroll);
  },
  components: {
    Goods
  }
}
</script>
<style lang="less" scoped>
	.home{
		padding-bottom:100px;
	}
	.header{
		height:50px;
		width:100%;
		background-color: #1BAEAE;
		position: fixed;
		left:0;
		top:0;
		z-index:9999;
		opacity: 0.5;
	}
	.header.active{
		opacity: 1;
	}
	.van-swipe-item {
	  img{
		width:100%;  
	  }  
	}
</style>
